// 搜索栏
.input-search {
    .flex;
    .relative;
    .flex-middle;
    height: 28px;
    overflow: hidden;
    background-clip: padding-box;
    background-color: #efeff4;
    padding: 8px;
    border-radius: 3px;
    .synthetic {
        .flex;
        .flex-1;
        .relative;
        z-index: 1;
        height: 28px;
        line-height: 28px;
        width: 100%;
        transition: width .3s;
        display: block;
        text-align: center;
        background-color: #fff;
        overflow: hidden;
    }
    .ph {
        width: 100%;
        transition: all .3s;
        color: @default-color;
        padding-left: 15px;
        z-index: 1;
        height: 28px;
        line-height: 28px;
        transition: width .3s;
        display: block;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
    }
    .search-sure {
        display: none;
        padding-left: 8px;
        font-size: @font-size-md;
        color: #108ee9;
        text-align: right;
    }
    input[type="search"] {
        z-index: 2;
        opacity: 1;
        width: 100%;
        text-align: left;
        display: block;
        color: #000;
        height: 28px;
        font-size: 15px;
        background-color: transparent;
        border: none;
        opacity: 1;
        padding: 0 28px 0 35px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .clear-search {
        .flex;
        .flex-middle;
        .flex-around;
        .absolute;
        top: 6px;
        display: none;
        right: 6px;
        z-index: 3;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: @default-color;
        color: white;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 15px 15px;
        transition: all .3s;
        &.active{
            .flex;
        }
    }
}



.input-search {
    &.active{
        .ph {
            width: auto;
        }
        .search-sure{
            display: block;
        }
        // .clear-search {
        //     .flex;
        // }
    }
}